<template>
  <el-form class="form-search-box" ref="formRef" :model="props.query">
    <div class="flex-row-warp" :style="props.style">
      <slot></slot>
      <el-form-item>
        <!-- <el-button type="primary" @click="handleSearch" v-if="needBtns.needSearch">搜索 </el-button>
        <el-button @click="handleRest" v-if="needBtns.needRest">重置 </el-button> -->
        <el-button @click="handleSearch" v-if="needBtns.needRefresh">刷新 </el-button>
        <slot name="i-btn"></slot>
      </el-form-item>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { emitter } from '../hooks/event/useEventBus'
import { ElButton, ElForm, ElFormItem } from 'element-plus'

const props = defineProps({
  query: {
    type: Object,
    default: {}
  },
  needBtns: {
    type: Object,
    default: {
      needRefresh: false,
      needSearch: true,
      needRest: true
    }
  },
  style: {
    type: String,
    default: '',
    required: false
  }
})

const emit = defineEmits(['onSearch', 'onReset'])

const formRef = ref()

// 查询操作
const handleSearch = () => {
  emitter.emit('search')
  emit('onSearch')
}

// 重置操作
const handleRest = () => {
  formRef?.value.resetFields()
  emit('onReset')
}

defineExpose({
  handleSearch
})
</script>

<style scoped>
.form-search-box :deep() .el-form-item {
  margin-right: 23px !important;
}
</style>
